import { memo, ReactElement, useRef, useState } from "react";
import { Carousel } from "antd";

import Image from "next/image";
import styles from "./index.module.scss";
import classNames from "classnames";

import type { FC } from "react";
import type { IBanner } from "@/services/modules/home";

export interface IProps {
  children?: ReactElement;
  banners?: IBanner[];
}

const contentStyle: React.CSSProperties = {
  margin: 0,
  height: "160px",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79",
};

const TopSwipper: FC<IProps> = memo(function (props) {
  const { banners } = props;

  const carlRef = useRef<any>(null);

  const [currendIndex, setCurrendIndex] = useState(0);
  const handleCarlChange = (currendIndex: number) => {
    setCurrendIndex(currendIndex);
  };

  const handlePrev = () => {
    carlRef.current?.prev();
  };

  const handleNext = () => {
    carlRef.current?.next();
  };
  return (
    <>
      <div className={classNames(styles.container, "wrapper")}>
        <Carousel
          ref={carlRef}
          className={styles["main"]}
          autoplay
          autoplaySpeed={3000}
          dots={false}
          fade
          afterChange={handleCarlChange}
        >
          {banners?.map((item) => {
            return (
              <div className={styles["carl-item"]} key={item.id}>
                <div
                  className={styles["itembg"]}
                  style={{ backgroundImage: `url(${item.backendPicStr})` }}
                ></div>
                <Image
                  src={item.picStr!}
                  alt="banner"
                  className={styles["image"]}
                  width={1100}
                  height={480}
                  priority
                ></Image>
              </div>
            );
          })}
        </Carousel>

        <ul className={styles.dots}>
          {banners?.map((item, index) => {
            return (
              <li
                key={item.id}
                className={classNames(
                  styles.dot,
                  currendIndex === index && styles["active"]
                )}
              ></li>
            );
          })}
        </ul>

        <div className={styles["prev"]} onClick={() => handlePrev()}></div>
        <div className={styles["next"]} onClick={() => handleNext()}></div>
      </div>
    </>
  );
});

export default TopSwipper;
TopSwipper.displayName = "TopSwipper";
